<template>
  <div class="user">
    <HeaderTop>
      <template #left>
        <van-icon
          name="arrow-left"
          @click="router.back()"
          size="20"
          style="transform: translateX(-0.3rem)"
        />
      </template>
      <template #center>
        <div class="fs-1 wd-75 center strong" style="color: white">我的</div>
      </template>
    </HeaderTop>
    <main>
      <section class="userinfo pt-4 pb-3 pl-4 pr-2" @click="login">
        <div>
          <van-image v-if="userinfo?.avatar" :src="imgpath" height="1.55rem" width="1.55rem" round>
          </van-image>
          <span class="privateImage" v-else>
            <svg class="privateImage-svg">
              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
            </svg>
          </span>
        </div>
        <div class="pl-3 login">
          <p class="pb-2" v-if="!userinfo?.username">
            <span class="white fs-1 strong">登录/注册</span>
          </p>
          <p class="pb-2" v-else>
            <span class="white fs-1 strong">{{ userinfo.username }}</span>
          </p>
          <p v-if="!userinfo?.mobile">
            <van-icon name="phone" color="white"></van-icon
            ><span class="white fs-7">暂无绑定手机号</span>
          </p>
          <p v-else>
            <van-icon name="phone" color="white"></van-icon
            ><span class="white fs-7">手机号&nbsp;{{ userinfo.mobile }}</span>
          </p>
        </div>
        <div class="arrow-right">
          <van-icon name="arrow" size="14" color="white"></van-icon>
        </div>
      </section>
      <section class="shop-benefit mb-2">
        <div class="border-right py-3">
          <p class="mb-2">
            <span class="benefit-count strong">{{
              userinfo ? parseInt(userinfo.balance).toFixed(2) : "0.00"
            }}</span
            ><span class="fs-5 text-1">元</span>
          </p>
          <p><span class="fs-5 text-2">我的余额</span></p>
        </div>
        <div class="border-right py-3">
          <p class="mb-2">
            <span class="benefit-count strong">{{ userinfo ? userinfo.gift_amount : 0 }}</span>
            <span class="fs-5 text-1">个</span>
          </p>
          <p><span class="fs-5 text-2">我的优惠</span></p>
        </div>
        <div class="py-3">
          <p class="mb-2">
            <span class="benefit-count strong">{{ userinfo ? userinfo.point : 0 }}</span>
            <span class="fs-5 text-1">分</span>
          </p>
          <p><span class="fs-5 text-2">我的积分</span></p>
        </div>
      </section>
      <section class="mt-2">
        <van-cell title="我的订单" icon="orders-o" is-link :to="{ name: 'Order' }"> </van-cell>
        <van-cell title="积分商城" icon="bag" is-link> </van-cell>
        <van-cell title="饿了吗会员卡" icon="gem" is-link> </van-cell>
      </section>
      <section class="mt-2">
        <van-cell title="服务中心" icon="add-square" is-link> </van-cell>
        <van-cell title="下载饿了么APP" icon="live" center is-link> </van-cell>
      </section>
      <router-view v-slot="{ Component }">
        <transition name="detail-show">
          <keep-alive :include="['Info']">
            <component :is="Component" />
          </keep-alive>
        </transition>
      </router-view>
    </main>
    <TabBar></TabBar>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { getImgPath } from "@/uitls/path";
import { imgBaseUrl } from "dir/env.config";
import { storeToRefs } from "pinia";
import { user } from "@/store/index";
const store = user();
const { userinfo, user_id } = storeToRefs(store);
const router = useRouter();
//头像链接处理
const imgpath = computed(() => {
  let path;
  if (userinfo.value.avatar.indexOf("/") !== -1) {
    path = imgBaseUrl + userinfo.value.avatar;
  } else {
    path = getImgPath(userinfo.value.avatar);
  }
  return path;
});
//如果没登录就跳转换到登录页面,如果有就跳转到修改页面
const login = () => {
  if (!user_id.value) {
    router.push({
      name: "Login",
    });
  } else {
    router.push({
      name: "Info",
    });
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/mixin.scss";
.user {
  position: absolute;
  z-index: 9;
  @include wh(100%, 100%);
  overflow: hidden;
  background-color: whitesmoke;
}
.userinfo {
  background-color: $blue;
  display: flex;
  align-items: center;
  .privateImage {
    display: inline-block;
    @include wh(1.55rem, 1.55rem);
    .privateImage-svg {
      @include wh(100%, 100%);
      background-color: white;
      border-radius: 50%;
    }
  }
  .login {
    flex: 1;
  }
  .arrow-right {
    width: 0.5rem;
  }
}
.shop-benefit {
  display: grid;
  grid-template-columns: repeat(3, 33.3%);
  grid-template-rows: 100%;
  @include wh(100%, auto);
  box-sizing: border-box;
  background-color: $fc;
  .border-right {
    border-right: 0.02rem solid $Dark;
  }
  p {
    text-align: center;
    .benefit-count {
      @include sc(0.75rem, orange);
    }
  }
}
</style>
